<template>
  <div class="app-container">
    <div class="searchform">
      <ToolBar :filters="filters" :getList="getList" :handleAdd="handleCreate"/>
    </div>
    <el-table v-loading="listLoading" :data="truckList" element-loading-text="Loading" fit highlight-current-row>
      <el-table-column align="center" label="ID" prop="id" width="95" type="index"></el-table-column>
      <el-table-column label="设备名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="设备编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.customerCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="容积" align="center" min-width="100">
        <template slot-scope="scope">{{ scope.row.volume }} m³</template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="335" min-width="335">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="handleUpdate(scope.$index, scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="small" type="warning" @click="truckPicUpdate(scope.$index, scope.row)">图片编辑</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDel(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--翻页-->
    <el-col :span="24" class="toolbar">
      <Pagination v-show="total>0" :total="total" :pageSize="pagesize" :handleCurrentChange="handleCurrentChange"/>
    </el-col>

    <!-- 图片编辑弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPicListVisible" :close-on-click-modal="false">
      <UploadImg
        :picList="picList"
        :FileUrl="FileUrl"
        :Data="Data"
        :handleAvatarSuccess="handleAvatarSuccess"
        :handleRemove="handleRemove"
        :beforeRemove="beforeRemove"
      ></UploadImg>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPicListVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTruckList,
  deleteTruck,
  deleteTruckPic,
  getTruckData
} from "@/api/truck";
import ToolBar from "@/views/layout/components/ToolBar";
import Pagination from "@/views/layout/components/Pagination";
import UploadImg from "@/components/Upload/UploadImg2";
import UploadCreateImg from "@/components/Upload/UploadImg3";
import { mapGetters } from "vuex";

export default {
  components: { ToolBar, Pagination, UploadImg, UploadCreateImg },

  data() {
    return {
      filters: {
        name: "",
        placeholder: "设备名称"
      },
      page: 1,
      total: 0,
      pagesize: 10,
      truckList: [],
      listLoading: false,
      truckId: "",
      dialogStatus: "",
      dialogPicListVisible: false,
      textMap: {
        truck: "编辑保温箱图片"
      },
      Data: {},
      FileUrl: "http://gsp.coldcloud.com/truck/pic/insert",
      picList: []
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["customerid"])
  },

  // watch: {
  //   picList:{

  //   }
  //     picList(newval, oldval) {
  //       this.picList = newval.picList;
  //     },
  //     deep: true,
  //     immediate: true
  // },
  watch: {
    picList: {
      handler(newValue, oldValue) {
        for (let i = 0; i < newValue.length; i++) {
          if (oldValue[i] != newValue[i]) {
            //this.picList.push(newValue)
          }
        }
      },
      deep: true
    }
  },

  methods: {
    //新增图片上传检查
    handleChange(file, fileList) {
      const isImage =
        file.raw.type == "image/png" ||
        file.raw.type == "image/jpg" ||
        file.raw.type == "image/jpeg";
      if (!isImage) {
        this.$message.error("上传图片只能是JPG或者png格式!");
      }

      if (isImage) {
        if ((this.dialogStatus = "createfrigerant")) {
          this.picList = fileList;
        }
      } else {
        fileList.pop();
      }
      return isImage;
    },

    // 上传成功后
    handleAvatarSuccess(response, file, fileList) {
      this.$message({
        message: "图片上传成功",
        type: "success"
      });
      this.dialogPicListVisible = false;
      this.getList();
    },

    // 删除图片
    handleRemove(file, fileList) {
      if (file.hasOwnProperty("fid")) {
        deleteTruckPic({ fid: file.fid });
      }
    },

    beforeRemove(file, fileList) {
      if (file.hasOwnProperty("originname")) {
        if (fileList.length > 1) {
          return this.$confirm(`确定移除 ${file.originname}？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          });
        } else {
          this.$message({
            message: "冷藏车组需至少保留一张图片",
            type: "warning"
          });
          return false;
        }
      }
    },

    // 获取列表
    getList() {
      this.listLoading = true;
      getTruckList({
        name: this.filters.name,
        customerId: this.customerid,
        page: this.page,
        size: this.pagesize
      })
        .then(response => {
          this.truckList = response.data.records;
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch(e => {});
    },
    // 翻页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },

    //跳转编辑
    handleUpdate(index, row) {
      this.$router.push({
        path: "/devices/carEdit/" + row.id
      });
    },
    //跳转新增
    handleCreate() {
      this.$router.push({
        path: "/devices/carAdd/"
      });
    },

    //显示图片编辑界面
    truckPicUpdate(index, row) {
      this.picList = [];
      this.dialogStatus = "truck";
      this.Data = { truckId: row.id };
      getTruckData({ truckId: row.id }).then(response => {
        this.picList = response.data.picList;
        this.dialogPicListVisible = true;
      });
    },

    handleDel(index, row) {
      this.$confirm("确认删除该设备吗?", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        deleteTruck({ truckId: row.id }).then(() => {
          this.listLoading = false;
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.truckList.indexOf(row);
          this.truckList.splice(index, 1);
        });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>
<style>
.customerselect {
  color: #606266;
  font-size: 14px;
  float: left;
}
.subtab_tit {
  text-align: center;
}
</style>


